<template>
  <div class="learnIndex">
    <div class="top" :class="info.total_duration !== info.already_duration?'':'topBg'">
      <div class="title">
        <span>今日学习计划</span>
        <span>预计学习时长{{getDuration(info&&info.total_duration)}}</span>
        <!--<span>预计学习时长{{Math.floor(info.total_duration/60)}}分钟</span>-->
      </div>

      <div v-if="info.total_duration !== info.already_duration" class="schedule">
        <div class="go" :style="{width:info.already_duration/info.total_duration*100+'%'}"></div>
        <div
          :style="{left:info.already_duration/info.total_duration*100+'%'}"
        >{{getDuration(info&&info.total_duration)}}</div>
      </div>

      <span v-if="info.total_duration !== info.already_duration" class="start">
        <span @click="start()">开始学习</span>
        <i class="iconfont iconxuexi_icon_sanjiao"></i>
      </span>

      <p v-if="info.total_duration === info.already_duration" class="complete">恭喜你！</p>
      <p v-if="info.total_duration === info.already_duration" class="completeDes">今日学习计划已完成</p>
    </div>

    <div class="box" v-for="item of list" :key="item.id" @click="go(item)">
      <div class="boxTitle">
        <i v-if="item.is_complete == 0"
          style="color:#F47548"
          class="iconfont iconxuexi_meiriyixue_yuan_red"
        ></i>
        <i v-if="item.is_complete == 1" class="iconfont iconxuexi_meiriyixue_yuan_grey"></i>
        <span>{{item.course_name||item.title}}</span>
      </div>

      <div class="content">
        <p>{{item.title}}</p>
        <p class="des">
          <span>{{item.duration | conversionToMinuteC}}</span>
          <span v-if="item.is_complete == 0" class="not">待学习</span>
          <span v-if="item.is_complete == 1">已学习</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      list: [],
      is_complete: true
    };
  },
    computed:{
        getDuration(){
            return function (val) {
                if(val<=60){
                    return `${val}`+'秒'
                }else if(val>60&&val<3600){
                    return Math.floor(val/60)+'分钟'
                }else if(val>=3600&&val<=86400){
                    var h = parseInt(val/3600);
                    console.log(h)
                    var m =parseInt((val -h*3600)/60);
                    return h+'小时'+m+'分钟'
                }else{
                    var day =parseInt(val/86400)
                    return day+'天'
                }
            }
        }
    },
  mounted() {
    this.$progress.done();
    this.init();
  },
  methods: {
    start() {
      this.list.some(e => {
        if (e.is_complete == 0) {
          this.go(e);
          return true;
        }
      });
    },
    go(item) {
      if (item.state == 1) {
        this.$router.push({
          path: "/learn/videoInfo",
          query: {
            id: item.course_id,
            chapters_id: item.id,
            type: item.type,
            isTodayPlan: true,
            task_course_id: item.task_course_id,
            task_id: this.info.task_id
          }
        });
        return;
      }
      if (item.state == 2) {
        this.$router.push({
          path: "/learn/audioInfo",
          query: {
            id: item.course_id,
            chapters_id: item.id,
            type: item.type,
            isTodayPlan: true,
            task_course_id: item.task_course_id,
            task_id: this.info.task_id
          }
        });
        return;
      }

      if (item.state == 3) {
        this.$router.push({
          path: "/learn/specialInfo",
          query: {
            id: item.id,
            type: item.type,
            isTodayPlan: true,
            duration: item.duration,
            task_course_id: item.task_course_id,
            task_id: this.info.task_id
          }
        });
        return;
      }
    },
    init() {
      this.$http
        .get("/applets/StudyPlay/new_task", {
          org_id: JSON.parse(Cookies.get('user_71ydj')).organization_id,
          uid: JSON.parse(Cookies.get('user_71ydj')).id
        })
        .then(res => {
          this.list = res.data.chapters_info;
          this.info = res.data.info;
          this.list.forEach(e => {
            if (e.is_complete == 1) {
              this.is_complete == false;
            }
          });
        });
    }
  }
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.learnIndex {
  margin-bottom: 200px;
}

.complete {
  margin-top: 60px;
  margin-left: 47px;
  font-size: 22px;
  color: #fff;
  font-weight: bold;
}
.completeDes {
  margin-top: 0;
  margin-left: 47px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: bold;
}

.not {
  background: #f47548 !important;
  color: #fff !important;
}
.topBg {
  background: url("~@as/img/xuexi_meiriyixue_bg_yixue@2x.png") !important;
  background-size: 100% 100% !important;
}
.top {
  background: url("~@as/img/xuexi_meiriyixue_bg_weixue@2x.png");
  background-size: 100% 100%;
  height: 211px;
  .title {
    margin-top: 34px;
    span {
      font-size: 28px;
      color: #333;
      margin-left: 16px;
    }
    span + span {
      font-size: 12px;
      color: #999;
      margin-left: 15px;
    }
  }

  .schedule {
    width: 300px;
    height: 2px;
    border-radius: 10px;
    margin-top: 64px;
    margin-left: 36px;
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    .go {
      width: 0%;
      height: 100%;
      background: #fff;
    }
    div + div {
      width: 40px;
      height: 15px;
      color: #eb4d44;
      background: #fff;
      font-size: 9px;
      position: absolute;
      top: 50%;
      left: 0%;
      margin-left: -20px;
      margin-top: -7px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
    }
  }

  .start {
    color: #fff;
    font-size: 18px;
    margin-left: 36px;
    margin-top: 25px;
    display: flex;
    width: auto;
    align-items: center;

    i {
      font-size: 8px;
      margin-left: 10px;
      display: flex;
      align-items: center;
    }
  }
}

.box {
  margin-top:20px;
  width: 100%;
  .boxTitle {
    display: flex;
    span{
      display: block;
      width: 290px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    * {
      color: #666;
      font-size: 12px;
    }
    i {
      color: #ccc;
      margin-left: 16px;
      margin-right: 10px;
    }
  }

  .content {
    margin-left: 36px;
    margin-right: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > p {
      font-size: 16px;
    }

    .des {
      margin-top: 22px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 12px;
        color: #999;
      }

      span + span {
        font-size: 14px;
        color: #999;
        display: block;
        width: 68px;
        height: 26px;

        background: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>